<template>
  <div class="bottom-content">
    <div class="slide-wrap">
      <div class="player-slide">
        <button type="button" class="sy_button sy_button_plain">
          <i class="el-icon-video-play" style="font-size: 16px;"></i>
        </button>
        <button type="button" disabled="disabled" class="sy_button sy_button_plain close-btn">
          <i class="el-icon-close" style="font-size: 16px;"></i>
          <div class="sy_button_disabled" style="inset: -1px; border-radius: 0px;"></div>
        </button>
        <div class="slide-content">
          <div class="Slider_container" style="position: absolute; left: 10px; right: 10px; top: 5px;">
            <div class="Slider_bar" style="background-color: rgb(214, 214, 214);">
              <div class="Slider_btn" style="left: 0%; border-color: rgb(64, 150, 209);"></div>
              <span class="Slider_tooltip" style="left: calc(0% - 65px); border-color: rgb(64, 150, 209);"> 2023-06-05 00:00:03 </span>
              <!-- <span class="Slider_tooltip_1BGD5" style="left: calc(80.8766% - 65px); border-color: rgb(64, 150, 209); display: none;">  2023-06-05 17:58:20 </span> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progressTime: 0,  // 时间
      palyStatus: 0, //0->未开始  1->行驶中  2->暂停
      value: 0,  // 进度条初始化
      speedList: [1, 2, 3, 4, 5], // 倍数数据
      markerSpeed: 100, // 初始化速度
      marker: null, // 标记点
      lineArr: [], // 轨迹点数组
      passedPolyline: null,
      positionIndex: [], //轨迹起始点--车辆所在的位置
      speedCount: 1, // 目前选择的倍数
      passedPath: 0, // 存放（播放时点击倍数）抓取到的位置
      int: null, // 定时器--进度条
      timeInt: null, // 定时器--时间
      curreGDPath: null,  //存放（播放时点击倍数）抓取到的经纬度
      polyline: null, // 轨迹线路
      map: null //map地图
    };
  },
}
</script>

<style lang="less" scoped>
.bottom-content {
  position: relative;
  width: 100%;
  border-radius: 0px;
  border: 1px solid var(--border_color_dark);
  overflow: hidden;
  height: 370px;
  padding: 20px;
 }
.slide-wrap {
  width: 330px;
  padding: 5px;
  position: relative;
  display: flex;
  flex-flow: column;
  height: 100%;
  // overflow: hidden auto;
  float: left;
  border-right: 1px solid rgb(174, 186, 197);
}
.player-slide {
  height: 32px;
  position: relative;
  width: 100%;
  margin-top: 5px;
}
.sy_button {
  height: 32px;
  padding: 0px;
  border-width: 1px;
  border-radius: 0px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 32px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  text-align: center;
  border-style: solid;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: normal;
}
.slide-content {
  position: absolute;
  left: 62px;
  bottom: 0px;
  right: 31px;
  border: 1px solid rgb(174, 186, 197);
  height: 32px;
  background-color: rgb(255, 255, 255);
}
.sy_button_plain {
  border-color: #aebac5;
  background-color: #fff;
}
.close-btn {
  height: 32px;
  padding: 0px;
  border-width: 1px;
  border-radius: 0px;
  position: absolute;
  left: 31px;
  bottom: 0px;
  width: 32px;
}
.Slider_container {
  // position: relative;
  line-height: normal;
  cursor: pointer;
  height: 20px;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}
.Slider_bar {
  top: 8px;
  width: 100%;
  height: 4px;
  vertical-align: middle;
  position: relative;
}
.Slider_btn {
  position: absolute;
  border-style: solid;
  border-radius: 50%;
  background-color: #fff;
  outline: 0;
  margin-left: -6px;
  top: -4px;
  width: 12px;
  height: 12px;
  border-width: 2px;
}
.Slider_tooltip {
  position: absolute;
  top: -35px;
  padding: 4px 6px;
  border-width: 1px;
  border-style: solid;
  white-space: nowrap;
  background-color: #fcf0c1;
  z-index: 99999;
}
</style>